<template>
    <div class="login">
        <!-- 登录盒子 -->
        <el-card title="登录">
            <!-- 手机号输入框 -->
            <el-input placeholder="请输入手机号" v-model="mobile"></el-input>

            <!-- 验证码输入框 -->
            <el-row type="flex" justify="space-between" align="middle">
                <el-col :span="12">
                    <el-input
                        placeholder="请输入验证码"
                        v-model="code"
                    ></el-input>
                </el-col>

                <el-button
                    type="primary"
                    :disabled="isSend"
                    @click="onGetCodeClicked"
                    >{{ btnText }}</el-button
                >
            </el-row>

            <!-- 登录 -->
            <el-button class="login-btn" @click="onLoginClicked"
                >登录</el-button
            >
        </el-card>
    </div>
</template>

<script>
// let isSend = false;
export default {
    data() {
        return {
            mobile: "",
            code: "",
            btnText: "获取验证码",
            isSend: false,
        };
    },
    methods: {
        async onGetCodeClicked() {
            // 接收手机号
            const { mobile } = this;
            // 非空校验
            if (!mobile) {
                this.$notify({
                    title: "手机号不能为空",
                    type: "error",
                });
                return;
            }

            // 校验手机号格式
            if (!/^1[3579]\d{9}$/.test(mobile)) {
                this.$notify({
                    title: "手机号格式不正确",
                    type: "error",
                });
                return;
            }

            // 先判断是不是已经发送了
            if (this.isSend) {
                return;
            }

            // 锁上
            this.isSend = true;

            // 设置一个倒计时的时间
            let num = 59;

            // 因为定时器是一秒之后执行，页面显示会有一秒的延迟，所以要在最外层先调用一次
            this.btnText = `重新获取验证码(${num}S)`;

            // 设置倒计时效果
            let intervalId = setInterval(() => {
                num--;
                if (num < 1) {
                    this.btnText = "获取验证码";
                    this.isSend = false;
                    clearInterval(intervalId);
                    return;
                }
                this.btnText = `重新获取验证码(${num}S)`;
            }, 1000);

            // 调用后端接口，获取验证码
            const res = await this.$http.post("/codes", { mobile });

            // 发送失败提示
            if (res.code !== 201) {
                this.$notify({
                    title: res.message,
                    type: "error",
                });
                return;
            }
            // 发送成功提示
            this.$notify({
                title: "发送成功",
                type: "success",
            });
        },
        /**
         * 登录处理逻辑
         */
        async onLoginClicked() {
            const { mobile, code } = this;
            const res = await this.$http.post("/login", { mobile, code });
            // 登录出错，显示错误信息
            if (res.code !== 200) {
                return this.$message.error(res.message);
            }
            // 登录成功，保存用户登录态
            window.sessionStorage.setItem("token", res.data.token);
            window.sessionStorage.setItem(
                "user",
                JSON.stringify(res.data.user)
            );
            // 保存用户对应的菜单
            window.sessionStorage.setItem(
                "menus",
                JSON.stringify(res.data.menus)
            );
            // 跳转到后台管理页面
            this.$router.push("/dashboard");
        },
    },
};
</script>

<style lang="less" scoped>
.login {
    .el-card {
        max-width: 450px;
        margin: 230px auto;
    }

    .el-row {
        margin-top: 15px;
    }

    .login-btn {
        width: 100%;
        margin-top: 15px;
    }
}
</style>
